<template>
  <div class="select-products" style="width: 62%">
    <div class="table-wrap" v-if="dataList.length > 0">
      <el-button
        v-if="type === 'cover'"
        class="mb8"
        type="primary"
        size="small"
        :disabled="dataList.length >= 10"
        @click="dialogVisible = true"
      >
        点击关联（{{ dataList.length }}/10）
      </el-button>
      <el-button v-else class="mb8" type="primary" size="small" @click="dialogVisible = true"> 点击添加 </el-button>
      <el-table class="jzt-table" :data="dataList" border style="width: 100%">
        <el-table-column prop="date" fixed label="商品信息" width="360">
          <template #default="scope">
            <div class="col1">
              <div class="left">
                <img :src="scope.row.mainPicUrl" alt="" />
              </div>
              <div class="right">
                <h3 class="name text-over" :title="scope.row.productAliasName" style="max-width: 200px">
                  {{ scope.row.productName }}
                </h3>
                <p class="text-break">上架类目：{{ scope.row.preview || "-" }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="brandName" show-overflow-tooltip label="品牌" width="160" />
        <el-table-column prop="modeCode" show-overflow-tooltip label="型号" width="160" />
        <el-table-column prop="factoryName" show-overflow-tooltip label="价格" width="180">
          <template #default="scope">
            <p>
              正价：<i style="font-style: normal; color: #ff3333">¥{{ scope.row.businessLowestPrice }}</i>
            </p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" show-overflow-tooltip label="操作">
          <template #default="scope">
            <el-button type="primary" link @click="delRightSku(scope.row, 2)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="empty-table-wrap" v-else style="width: 100%; margin-bottom: 12">
      <header></header>
      <div class="jzt-flex-center">
        <div>
          <p>暂时没有数据</p>
          <el-button v-if="type === 'cover'" type="primary" size="small" @click="dialogVisible = true">
            点击关联（0/10）
          </el-button>
          <el-button v-else type="primary" size="small" @click="dialogVisible = true"> 点击添加 </el-button>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" title="选择商品" width="1200" modal-class="detail-select-prods-dialog">
      <template #header>
        <p class="f18" style="color: #131414"><i class="icon mr8 mb4"></i>选择商品</p>
      </template>
      <div class="content">
        <el-container style="height: 500px">
          <el-aside width="200px">
            <el-tree
              :default-expand-all="false"
              :data="treeData"
              :props="{
                children: 'children',
                label: 'name'
              }"
              highlight-current
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                </span>
              </template>
            </el-tree>
          </el-aside>
          <el-main v-loading="loading">
            <div class="left">
              <div v-infinite-scroll="load" infinite-scroll-distance="5" :infinite-scroll-immediate="false">
                <!-- 条件搜索 -->
                <div class="action-wrap pt20">
                  <div class="jzt-flex-center">
                    <p class="wd70">价格范围：</p>
                    <el-input-number
                      v-model="formData.minPrice"
                      class="wd80 mr10 jzt-input-number jzt-input-number-hidden"
                      placeholder="请输入"
                      :min="0"
                      controls-position="right"
                      @change="changeGetListFun({ categoryId })"
                    />
                    <span>至</span>
                    <el-input-number
                      v-model="formData.maxPrice"
                      class="wd80 ml10 jzt-input-number jzt-input-number-hidden"
                      placeholder="请输入"
                      :min="0"
                      controls-position="right"
                      @change="changeGetListFun({ categoryId })"
                    />
                  </div>

                  <div class="brand-wrap jzt-flex-center">
                    <p>品牌：</p>
                    <el-checkbox-group v-model="formData.brandIds" size="small" @change="changeGetListFun({ categoryId })">
                      <div
                        v-for="(item2, index2) in brandList"
                        :class="{ 'attr-wrap': index2 <= 2, 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                        :key="item2.stastsId"
                      >
                        <el-checkbox :label="item2.bandName" :value="item2.brandId" :key="item2.brandId" v-if="index2 <= 2">
                          <template #default>
                            <p class="attr2 f14 text-over" :title="item2.bandName">{{ item2.bandName }}</p>
                            <img
                              class="active-icon"
                              v-if="item2?.children?.length <= 0 || !item2?.children"
                              src="@/assets/images/chose_icon.png"
                              alt=""
                            />
                          </template>
                        </el-checkbox>
                      </div>
                    </el-checkbox-group>

                    <!-- 更多品牌 -->
                    <el-popover
                      popper-class="brand-popper"
                      v-if="brandList.length > 3"
                      placement="bottom"
                      :width="370"
                      trigger="click"
                    >
                      <template #reference>
                        <el-button class="more-brand-btn">...</el-button>
                      </template>

                      <template #default>
                        <el-checkbox-group v-model="formData.brandIds" size="small" @change="changeGetListFun({ categoryId })">
                          <div
                            v-for="(item2, index2) in brandList"
                            class="mb10"
                            :class="{ 'attr-wrap': index2 > 2, 'attr-only2': item2?.children?.length <= 0 || !item2?.children }"
                            :key="item2.stastsId"
                          >
                            <el-checkbox :label="item2.bandName" :value="item2.brandId" :key="item2.brandId" v-if="index2 > 2">
                              <template #default>
                                <p class="attr2 f14 text-over" :title="item2.bandName">{{ item2.bandName }}</p>
                                <img
                                  class="active-icon"
                                  v-if="item2?.children?.length <= 0 || !item2?.children"
                                  src="@/assets/images/chose_icon.png"
                                  alt=""
                                />
                              </template>
                            </el-checkbox>
                          </div>
                        </el-checkbox-group>
                      </template>
                    </el-popover>
                  </div>

                  <el-input
                    class="searchkey-input"
                    v-model="formData.searchKey"
                    clearable
                    style="width: 240px"
                    placeholder="请输入商品名称、型号、品牌名"
                    :suffix-icon="Search"
                    @change="changeGetListFun({ categoryId })"
                    @clear="changeGetListFun({ categoryId })"
                  />
                </div>

                <!-- 数据列表 -->
                <el-checkbox-group
                  v-model="checkList"
                  class="list"
                  @change="selectChange(type === 'cover' ? 10 - dataList.length : 9999)"
                >
                  <template v-if="list.length > 0">
                    <div class="list-item" v-for="item in list" :key="item.id">
                      <div style="height: 100%">
                        <el-checkbox label="" :value="item" />
                        <div class="prod-info">
                          <div class="top">
                            <div class="img"><img :src="item.mainPicUrl" alt="" /></div>
                            <div class="info">
                              <h3 class="name text-over" style="max-width: 260px" :title="item.productAliasName || '-'">
                                {{ item.productAliasName || "-" }}
                              </h3>
                              <p class="text-break">上架类目：{{ item.preview || "-" }}</p>
                              <p>品牌：{{ item.brandName || "-" }}</p>
                              <p class="jzt-flex-bt">
                                <span>型号：{{ item.modeCode || "-" }}</span>
                                <span class="price-text">
                                  正价：<i>¥{{ item.businessLowestPrice }}</i>
                                </span>
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <div v-else style="display: flex; justify-content: center; width: 100%">
                    <el-empty description="暂无数据" />
                  </div>
                </el-checkbox-group>
              </div>
            </div>
          </el-main>
        </el-container>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <p>
            共<b style="color: #ff3333"> {{ pagination.total }} </b>个搜索结果
          </p>
          <div class="jzt-flex-center">
            <p class="f18 mr35 jzt-flex-center" @click="drawer = true">
              <el-button link type="primary"><span style="color: #86909c">已选中：</span>{{ checkList.length }}</el-button>
            </p>
            <el-button class="f14" @click="close">取消</el-button>
            <el-button class="f14" type="primary" @click="submit">确认关联</el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 已选中抽屉 -->
    <el-drawer
      v-model="drawer"
      class="jzt-drawer"
      :size="1000"
      :direction="'rtl'"
      modal-class="detail-select-prods-drawer"
      :before-close="handleClose"
    >
      <template #header>
        <h4>已选中：{{ checkList.length }}</h4>
      </template>
      <template #default>
        <template v-if="checkList.length > 0">
          <el-table class="jzt-table" :data="checkList" border style="width: 100%">
            <template #empty>
              <el-empty description="这里暂时什么都没有" />
            </template>
            <el-table-column prop="date" fixed label="商品信息" width="360">
              <template #default="scope">
                <div class="col1">
                  <div class="left">
                    <img :src="scope.row.mainPicUrl" alt="" />
                  </div>
                  <div class="right">
                    <h3 class="name text-over" :title="scope.row.productAliasName" style="max-width: 200px">
                      {{ scope.row.productAliasName }}
                    </h3>
                    <p class="text-break">上架类目：{{ scope.row.preview || "-" }}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="brandName" show-overflow-tooltip label="品牌" width="160" />
            <el-table-column prop="modeCode" show-overflow-tooltip label="型号" width="160" />
            <el-table-column prop="factoryName" show-overflow-tooltip label="价格" width="180">
              <template #default="scope">
                <p>
                  正价：<i style="font-style: normal; color: #ff3333">¥{{ scope.row.businessLowestPrice }}</i>
                </p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" show-overflow-tooltip label="操作">
              <template #default="scope">
                <el-button type="primary" link @click="delRightSku(scope.row, 1)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <div v-else style="display: flex; justify-content: center; width: 100%">
          <el-empty description="暂无数据" />
        </div>
      </template>
    </el-drawer>
    <!-- 移除二次确认 -->
    <ActionSubmitDialog
      v-model:isOpen="_isOpenRemove"
      :title="'提醒'"
      :message="'您正在操作删除关联商品，为了避免误删除，当前删除只是移除，需要提交发布商品后正式删除文件，请根据需要进行操作！'"
      :submitBtnText="'继续'"
      @submit="returnSubmitRemove"
      @cancel="returnCancelRemove"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import useCodeArrStore from "@/store/modules/select";
import { ElMessage } from "element-plus";
import { categoryList, getSpListPage, getSpListNewpage, getBrandInfoList } from "@/apis/createFile/";
import ActionSubmitDialog from "@/components/ActionSubmitDialog";

const emit = defineEmits(["submit"]);
const props = defineProps({
  type: {
    type: String,
    default: "cover" //cover-封面产品 recommend-设计推荐
  },
  detailList: {
    type: Array,
    default: () => []
  }
});
const dialogVisible = ref(false);
const treeData = ref([]);
const list = ref([]); //分类查询出来待勾选的商品
const checkList = ref([]);
const drawer = ref(false);
const brandList = ref([]);
const formData = ref({
  minPrice: null,
  maxPrice: null,
  searchKey: "",
  brandIds: [] //选中的品牌
});
const dataList = ref([]); //勾选submit之后的商品
const loading = ref(false);
const _isOpenRemove = ref(false);
const isInit = ref(1);
const pagination = ref({
  page: 1,
  size: 50,
  total: 0
});

onMounted(() => {
  getTree();
});

watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      changeGetListFun({ categoryId: categoryId.value });
    }
  }
);
watch(
  () => props.detailList,
  val => {
    if (val) {
      dataList.value = val;
    }
  },
  { deep: true, immediate: true }
);

const load = () => {
  console.log("触底了，要请求分页查询接口 getSpListPages();");
  if (list.value.length < pagination.value.total) {
    pagination.value.page++;
    getListFun({ categoryId: categoryId.value });
  }
};

/**重置分页的sku列表查询 */
const changeGetListFun = data => {
  list.value = [];
  pagination.value.page = 1;
  pagination.value.size = 50;
  getListFun(data);
};

const getTree = () => {
  categoryList({
    page: 1,
    size: 9999
  }).then(res => {
    if (res.code === 200) {
      treeData.value = res.data;
    }
  });

  //查询品牌列表
  getBrandInfoList().then(res => {
    if (res.code === 200) {
      brandList.value = res.data || [];
    }
  });
};

const submit = () => {
  const _checkList = JSON.parse(JSON.stringify(checkList.value));
  const arr = [...dataList.value, ..._checkList];
  const uniqueArr = arr.filter((item, index, self) => {
    return index === self.findIndex(obj => obj.collectId === item.collectId);
  });
  dataList.value = uniqueArr;
  reset();
  dialogVisible.value = false;
  emit("submit", dataList.value);
};

const reset = () => {
  list.value = [];
  checkList.value = [];
  formData.value = {
    minPrice: null,
    maxPrice: null,
    searchKey: "",
    brandIds: [] //选中的品牌
  };
  pagination.value.page = 1;
  pagination.value.size = 50;
};
const close = () => {
  reset();
  dialogVisible.value = false;
};

//点击分类树节点，查询新的sku列表数据
const categoryId = ref("");
const handleNodeClick = (data, node) => {
  console.log(9999999999, data.children.length);
  categoryId.value = data.categoryId;
  if (data.children.length <= 0) {
    reset();
    getListFun(data);
  }
};

//查询商品sku列表数据
const getListFun = data => {
  loading.value = true;
  let params = {
    ...formData.value,
    page: pagination.value.page,
    size: pagination.value.size,
    productType: 0,
    categoryId: data ? data.categoryId : ""
  };
  getSpListNewpage(params).then(res => {
    if (res.code === 200) {
      list.value = [...list.value, ...res.data.list];
      pagination.value.total = res.data.total;
      loading.value = false;
    }
  });
};

const selectChange = (max = 9999) => {
  if (checkList.value.length > max) {
    ElMessage({
      message: `最多只能勾选${max}个商品！`,
      type: "error"
    });
    checkList.value = checkList.value.slice(0, max);
  }
  console.log("选中的数据", checkList.value);
};

//关闭已选中抽屉
const handleClose = () => {
  drawer.value = false;
};

const currentObj = ref({});
const returnSubmitRemove = () => {
  isInit.value++;
  delRightSku(currentObj.value, 2);
  _isOpenRemove.value = false;
};

const returnCancelRemove = () => {
  _isOpenRemove.value = false;
};

//点击右侧的删除图标按钮
/**
 *
 * @param item
 * @param type 1-删除checkList   2-删除submit之后的dataList
 */
const delRightSku = (item, type = 1) => {
  currentObj.value = item;
  if (type == 1) {
    const index = checkList.value.findIndex(obj => obj.collectId === item.collectId);
    if (index >= 0) {
      checkList.value.splice(index, 1);
    }
  } else {
    if (isInit.value === 1) {
      _isOpenRemove.value = true;
      return;
    }
    const index = dataList.value.findIndex(obj => obj.collectId === item.collectId);
    if (index >= 0) {
      dataList.value.splice(index, 1);
      emit("submit", dataList.value);
    }
  }
};
</script>

<style lang="scss">
.detail-select-prods-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding-left: 20px;
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    .left {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-of-type(2) {
        display: flex;
        align-items: center;
      }
    }
    .right {
      .el-button {
        font-size: 14px !important;
      }
    }
    .el-button {
      font-size: 18px;
    }
  }
}

.detail-select-prods-drawer {
  .el-drawer {
    box-shadow: -8px 0px 16px 0px rgba(0, 38, 73, 0.1);
    border-radius: 10px 0px 0px 10px;
  }

  .el-drawer__header {
    font-size: 18px;
    color: #131414;
    margin-bottom: 32px !important;
    h4 {
      font-weight: normal;
      position: relative;
      padding-left: 14px;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 14px;
        width: 6px;
        height: 6px;
        background-color: #409eff;
        border-radius: 50%;
      }
    }
  }
  .el-drawer__footer {
    text-align: center !important;
  }
}
.brand-popper {
  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;

    .attr-wrap {
      display: flex;
      align-items: center;
      // border: 1px solid #dcdfe6;
      border-radius: 4px;
      min-height: 32px;
      padding: 1px 8px;
      margin-bottom: 0px;
      .el-checkbox__label {
        padding-left: 0;
        margin-right: 8px;
      }
      .el-checkbox.el-checkbox--small {
        border-bottom: 1px solid transparent;
        &.is-checked {
          .el-checkbox__label {
            border-bottom: 1px solid #131414;
            line-height: 30px;
          }
        }
      }
      &.attr-only2 {
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
        position: relative;
        padding: 1px 0;
        .active-icon {
          display: none;
        }
        .el-checkbox__label {
          margin-right: 0;
        }
        .el-checkbox.el-checkbox--small {
          padding: 1px 10px;
          border: 1px solid transparent;
          border-radius: 4px;
          height: 30px;
          line-height: 30px;
          &.is-checked {
            border: 1px solid #007dff;
            .active-icon {
              display: block;
              position: absolute;
              width: 20px;
              height: 20px;
              right: 0px;
              bottom: 0px;
            }
            .el-checkbox__label {
              border-bottom: none;
            }
          }
        }
      }

      .el-checkbox__input {
        display: none;
      }
      .attr2 {
        max-width: 80px;
        box-sizing: border-box;
      }

      &:not(:last-of-type) {
        margin-right: 8px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.price-text {
  color: #3d3d3d;
  i {
    font-style: normal;
    color: #ff3333;
  }
}
:deep(.attr-wrap) {
  font-size: 14px;
}
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;

  .attr-wrap {
    display: flex;
    align-items: center;
    // border: 1px solid #dcdfe6;
    border-radius: 4px;
    min-height: 32px;
    padding: 1px 8px;
    margin-bottom: 0px;
    .el-checkbox__label {
      padding-left: 0;
      margin-right: 8px;
    }
    .el-checkbox.el-checkbox--small {
      border-bottom: 1px solid transparent;
      &.is-checked {
        .el-checkbox__label {
          border-bottom: 1px solid #131414;
          line-height: 30px;
        }
      }
    }
    &.attr-only2 {
      box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
      position: relative;
      padding: 1px 0;
      .active-icon {
        display: none;
      }
      .el-checkbox__label {
        margin-right: 0;
      }
      .el-checkbox.el-checkbox--small {
        padding: 1px 10px;
        border: 1px solid transparent;
        border-radius: 4px;
        height: 30px;
        line-height: 30px;
        &.is-checked {
          border: 1px solid #007dff;
          .active-icon {
            display: block;
            position: absolute;
            width: 20px;
            height: 20px;
            right: 0px;
            bottom: 0px;
          }
          .el-checkbox__label {
            border-bottom: none;
          }
        }
      }
    }

    .el-checkbox__input {
      display: none;
    }
    .attr2 {
      max-width: 80px;
      box-sizing: border-box;
    }

    &:not(:last-of-type) {
      margin-right: 8px;
    }
  }
}
.icon {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #409eff;
}
.col1 {
  display: flex;

  .left {
    width: 80px;
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
.empty-table-wrap {
  border: 1px solid #dcdfe6;
  header {
    width: 100%;
    height: 50px;
    background-color: #f2f6fc;
  }
  .jzt-flex-center {
    padding: 20px 0 20px 0;
    & > div {
      text-align: center;
      p {
        color: #86909c;
      }
    }
  }
}

:deep(.el-tree) {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 94px;

  .el-icon.el-tree-node__expand-icon {
    padding-left: 10px;
  }
  .el-tree-node__content {
    height: 32px;
    line-height: 32px;
  }

  .el-tree-node.is-current > .el-tree-node__content {
    background-color: #d9e8ff !important;
    color: #007dff;

    .custom-tree-node i {
      color: #007dff !important;
    }
  }
}
.content {
  height: calc(100% - 64px);
  :deep(.el-container) {
    height: 100%;
  }

  :deep(.el-aside) {
    height: 100%;
    overflow-y: auto;
    padding: 14px 0;
    box-sizing: border-box;
    .el-tree {
      padding-bottom: 10px !important;
    }
  }
  :deep(.el-main) {
    height: 100%;
    overflow-y: auto;
    border-left: 1px solid #e2e8f0;
    display: flex;
    padding: 0;
    & > div {
      flex: 1;
    }
    .action-wrap {
      display: flex;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 2;
      background-color: white;
      padding-bottom: 20px;
      .more-brand-btn {
        height: 36px;
        width: 36px;
        padding: 10px 10px;
        border: none;
        box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16);
        border-radius: 4px 4px 4px 4px;
      }
      .searchkey-input {
        .el-input__wrapper {
          background-color: white;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
        }
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
    }
    .list-item {
      border-radius: 2px;
      margin: 0 0px 10px 0;
      width: 50%;
      box-sizing: border-box;
      & > div {
        position: relative;
        background-color: #f5f7fa;
      }
      &:nth-of-type(2n + 1) {
        padding-right: 10px;
      }
      &:nth-of-type(2n) {
        padding-left: 10px;
      }

      .el-checkbox {
        position: absolute;
        top: 40px;
        left: 10px;
      }
      .prod-info {
        min-height: 100px;
        font-size: 16px;
        position: relative;
        .info {
          flex: 1;
        }
        .img {
          width: 80px;
          height: 80px;
          border-radius: 4px;
          background-color: #eee;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }
        h3 {
          font-size: 16px;
          color: #3d3d3d;
          line-height: 22px;
          font-weight: normal;
        }
        p {
          font-size: 12px;
          line-height: 20px;
          color: #86909c;
        }
        .top {
          display: flex;
          padding: 10px;
          padding-left: 46px;
        }
        footer {
          padding: 10px;
          border-top: 1px solid #e1e6ed;
          & > div {
            display: flex;
            justify-content: space-between;
          }
          p {
            flex: 1;
          }
          .tips {
            font-size: 12px;
            color: #86909c;
            margin: 0 -10px;
            margin-top: 10px;
            padding: 10px 10px 0 10px;
            line-height: 20px;
            border-top: 1px solid #e1e6ed;
          }
        }
        .warehouse-icon {
          position: absolute;
          right: 0;
          top: 0;
          background-color: #d9edff;
          border-radius: 12px 0px 0px 12px;
          font-size: 12px;
          line-height: 24px;
          padding: 0 9px 0 15px;
        }
      }
    }
    .left {
      padding: 0px 20px 20px 20px;
      .el-checkbox {
        .el-checkbox__inner {
          border-radius: 50%;
          display: inline-block;
          width: 16px;
          height: 16px;

          &::before {
            text-align: center;
            left: 8px;
            top: 0px;
          }

          &::after {
            font-size: 12px;
            text-align: center;
            left: 5px;
            top: 2px;
            width: 4px;
          }
        }
      }
    }
  }
}
</style>
